<template>
	<view class="coupon-container">
		<u-popup class="coupon-popup pore" v-if="showDialog" :show="showDialog" mode="center"
			:customStyle="{'width':'354px','position':'relative'}" @open="showDialog = true" round="20"
			bgColor="transparent">
			<view class="coupon-wrap">
				<view class="result-text">
					<text class="result-item">{{ resultData.resTitle[0] }}</text>
					<text class="result-item">{{ resultData.resTitle[1] }}</text>
				</view>
				<view class="result-desc">
					<view>{{ resultData.firstVal }}，</view>
					<view style="width: 232px; margin: 0 auto;">{{ resultData.lastVal }}</view>
				</view>
				<view class="result-btn" @tap="closeLayer">
					<button>{{ resultData.btn }}</button>
				</view>
				<view class="tip">推算理论源于小六壬，仅供国学探究，娱乐使用！</view>
			</view>
		</u-popup>

	</view>

</template>

<script>
	export default {
		props: {
			showDialog: {
				type: Boolean,
				default: false
			},
			result: {
				type: Object,
				default: () => {}
			}
		},
		data() {
			return {
				// showDialog: false,
				resultData: {}
			}
		},
		onLoad(option) {

		},
		computed: {

		},
		watch: {
			result: {
				handler(newObj, oldObj) {
					if (newObj && newObj.value) {
						const tempArr = newObj.value
						newObj.valueArr = tempArr.split('，')
						newObj.firstVal = newObj.valueArr[0]
						newObj.lastVal = newObj.valueArr.slice(1).join('，')
						newObj.resTitle = newObj.name.split('')
						this.resultData = newObj
						console.log(newObj, this.resultData, 'newObj')
					}
				},
				immediate: true
			},
		},

		methods: {
			async closeLayer() {
				this.$emit('closeLayer')
			},

			// 分割字符串
			splitStringByFirstComma(str) {
				console.log(str, 'starrrr')
				const parts = str.split('，', 2); // 使用限制参数2来只分割一次
				return parts;
			}
		}
	}
</script>

<style lang="scss">
	.coupon-container {
		z-index: 999;

		.coupon-wrap {
			position: relative;
			width: 632rpx;
			height: 660rpx;
			margin: 0 auto;
			padding: 52rpx 0 28rpx;
			background: url('https://hxs.dsjhs.com:553/prod-api/profile/jgtc.png') no-repeat center center;
			background-size: 100% 100%;
			box-sizing: border-box;

			.result-text {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 368rpx;
				height: 208rpx;
				margin: 0 auto;
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/mzg.png') no-repeat center center;
				background-size: 100% 100%;

				.result-item {
					width: 160rpx;
					height: 160rpx;
					margin-top: -8rpx;
					font-weight: 600;
					font-size: 96rpx;
					color: #34314F;
					line-height: 150rpx;
					text-align: center;
					background: url('https://hxs.dsjhs.com:553/prod-api/profile/mz.png') no-repeat center center;
					background-size: 100% 100%;
				}
			}

			.result-desc {
				margin: 40rpx auto;

				view {
					font-weight: 400;
					font-size: 32rpx;
					color: #34314F;
					line-height: 44rpx;
					text-align: center;
				}
			}

			.result-btn {
				position: absolute;
				bottom: 100rpx;
				left: 50%;
				transform: translateX(-50%);

				button {
					width: 396rpx;
					height: 96rpx;
					background: #FFDE6D;
					border-radius: 20px;
					line-height: 96rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					text-align: center;

					&::after {
						border: 0;
					}
				}
			}

			.tip {
				position: absolute;
				width: 100%;
				bottom: 28rpx;
				left: 50%;
				transform: translateX(-50%);
				font-weight: 400;
				font-size: 26rpx;
				color: #A694EA;
				line-height: 56rpx;
				text-align: center;
				font-style: normal
			}

		}


		.ellipsis {
			max-width: 320rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
</style>